<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <!-- 第一行 -->
      <div class="header_top">
        <!-- 容器居中显示 -->
        <div class="wrapper">
          <div class="left">山西农业大学欢迎您</div>
          <div class="right">学校主页</div>
        </div>
      </div>
      <!-- / 第一行 -->
      <!-- 第二行 -->
      <div class="header_main">
        <div class="wrapper">
          <div class="logo">
            <img src="/resources/images/logo.png" alt="">
          </div>
          <ul class="menu">
            <li class="current">农大公告</li>
            <li>学术成果</li>
            <li>农大人物</li>
          </ul>
        </div>
      </div>
      <!-- /第二行 -->
      <!-- /容器居中显示 -->
    </div>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--/轮播图 -->
      <!-- 板块 -->
      <div class="wrapper">
        <div class="plates">
          <div class="plate" v-for="i in 6" :key="i">
            <div class="head">
              <div class="title">学术成果</div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <ul class="list">
              <li>湖北大学刘俊松教授应邀来校开展学术交流</li>
              <li>校领导检查指导本科招生录取工作</li>
              <li>关于推荐充实山西省非主要农作物品种认定专家库人选的通知</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /板块 -->

    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <div class="footer">
      <div class="address">
        太谷校区
        邮编：030801
        地址：山西省晋中市太谷区铭贤南路1号 
      </div>
      <div class="copyright">
        版权所有：山西农业大学    晋ICP备05000473号         晋公网安备14072602000114号
      </div>
    </div>
    <!-- /底部 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
export default {
  //1.数据
  data(){
    return{
      carousels:[]
    }
  },
  //2.生命周期狗子函数 - 在vue的声明周期中各个执行阶段都会执行的代码
  created(){
    this.loadCarousels();
  },
  //3.方法，一般用来定义方法或者事件处理函数
  methods:{
    //加载轮播图数据
    loadCarousels(){
      let url='/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    },
    //加载板块数据
    loadCategoryAndArticles(){

    }
  }
}
</script>
<style lang="scss"  scoped>
//变量
$color_primary:#028b39;
.home{
  //头部样式
  .header{
    .header_top{
    background-color: $color_primary;
    color: #fff;
    & > .wrapper::after{
      display: block;
      content:'';
      clear: both;
    }
    .left,.right{
      line-height: 3em;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
  }
  .header_main{
    padding: .5em 0;
    & > .wrapper{
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .logo{
      img{
        height: 50px;
      }
    }
    ul.menu{
      position: absolute;
      bottom: 0;
      right: 0;
      & > li{
        float: left;
        padding: 0 .5em;
        cursor: pointer;
      }
      & > li.current{
        background-color: $color_primary;
        color: #fff;
      }
    }
  }
}
///内容样式
.content{
  background-color: #ecf6f2;
  .carousel{
    img{
      width: 100%;
    }
  }
  .plates::after{
    content:"";
    display: block;
    clear: both;
  }
  .plates{
    padding:.5em  0;
    .plate{
      box-sizing: border-box;
      float: left;
      width: 32.5%;
      height: 300px;
      background-color: #fff;
      padding: .5em;
      margin-left: 1.25%;
      margin-bottom: .5em;
      .head{
        display: flex;
        justify-content: space-between;
        .title{
          font-size: 18px;
          font-weight: bold;
          color: $color_primary;
        }
        .more{  
          color: #999;
          font-size: 12px;
          cursor: pointer;
        }
      }
      ul.list{
        li{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 2em;
          cursor: pointer;
        }
        li:hover{
          color: $color_primary;
        }

      }
    }
    .plate:nth-child(3n){
      margin-right: 0;
    }
  }
}
//底部样式
.footer{
  text-align: center;
 }
}
</style>